<template>
  <template v-for="item in settingMenuList" :key="item.path">
    <template v-if="item.children && item.children.length > 0">
      <el-sub-menu :index="item.path">
        <template #title>
          <template v-if="item.icon">
            <img :src="item.icon" />
          </template>
          <span>{{ item.title }}</span>
        </template>
        <SettingMenuItem :settingMenuList="item.children" />
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="item.path">
        <template v-if="item.icon">
          <img :src="item.icon" />
        </template>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </template>
</template>

<script setup>
const props = defineProps(["settingMenuList"]);
</script>

<style lang="scss" scoped>
img {
  width: 15px;
  margin-right: 5px;
}
</style>
